<template>
    <div class="Main">
        <div class="w1440">
            <div class="flex_fsw">
                <div class="MainLeft w72">
                    <div class="MainForm bgwhite">
                        <el-form ref="formRef" :model="formData" :rules="formRules" class="article-form">
                            <!-- 标题输入 -->
                            <div class="item mb40">
                                <div class="title">
                                    标题
                                </div>
                                <el-form-item prop="title">
                                    <el-input v-model="formData.title" placeholder="请输入文章标题（2~30个字）" maxlength="30"
                                        show-word-limit clearable />
                                </el-form-item>
                            </div>


                            <!-- 内容输入 -->
                            <div class="item mb40">
                                <div class="title">
                                    内容
                                </div>
                                <el-form-item prop="content">
                                    <el-input v-model="formData.content" type="textarea" :rows="5"
                                        placeholder="说些什么吧...." maxlength="400" show-word-limit />
                                </el-form-item>
                            </div>

                            <!-- 展示封面选择 -->
                            <div class="item mb40">
                                <el-form-item label="展示封面" prop="coverType">
                                    <el-radio-group v-model="formData.coverType" @change="handleCoverTypeChange">
                                        <el-radio label="single">单图</el-radio>
                                        <el-radio label="triple">三图</el-radio>
                                        <el-radio label="none">无图</el-radio>
                                    </el-radio-group>

                                    <!-- 单图上传 -->
                                    <div v-if="formData.coverType === 'single'" class="upload-area">
                                        <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card" :limit="1" :on-exceed="handleExceed"
                                            :file-list="singleImageList" :before-upload="beforeUpload"
                                            :on-success="handleSingleSuccess" :on-remove="handleSingleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                        <div class="upload-tip">
                                            <div>图片大小<span class="corMain">不要超过5M</span> </div>
                                            <div>
                                                优质的封面有利于推荐，格式支持JPEG、JPG、PNG
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 三图上传 -->
                                    <div v-if="formData.coverType === 'triple'" class="upload-area">
                                        <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card" :limit="3" multiple :on-exceed="handleExceed"
                                            :file-list="tripleImageList" :before-upload="beforeUpload"
                                            :on-success="handleTripleSuccess" :on-remove="handleTripleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                        <div class="upload-tip">
                                            <div>图片大小<span class="corMain">不要超过5M</span> </div>
                                            <div>
                                                优质的封面有利于推荐，格式支持JPEG、JPG、PNG
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>

                            <!-- 是否发起投票 -->
                            <div class="item ">
                                <el-form-item label="是否发起投票" prop="vote">
                                    <el-radio-group v-model="formData.vote">
                                        <el-radio label="deny">否</el-radio>
                                        <el-radio label="agree">是</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <div v-if="formData.vote === 'agree'" class="voteBox">
                                    <div class="item mb40">
                                        <el-form-item label="投票标题" prop="titleVote">
                                            <el-input v-model="formData.titleVote" placeholder="请输入投票标题（2~30个字）"
                                                maxlength="30" show-word-limit clearable />
                                        </el-form-item>
                                    </div>
                                    <el-form-item label="投票选项" prop="options">
                                        <div class="options-list">
                                            <div v-for="(option, index) in formData.options" :key="index"
                                                class="option-item">
                                                <el-input v-model="option.text"
                                                    :placeholder="'选项 ' + (index + 1)"></el-input>
                                                <el-button type="danger" @click="removeOption(index)"
                                                    v-if="formData.options.length > 2">
                                                    <img src="../assets/images/close.png" alt="">
                                                </el-button>
                                            </div>
                                        </div>
                                        <el-button type="primary" @click="addOption" class="addOptionBtn">
                                            + 添加选项
                                        </el-button>
                                    </el-form-item>
                                    <div class="item">
                                        <el-form-item label="投票类型" prop="voteType">
                                            <el-radio-group v-model="formData.voteType">
                                                <el-radio label="singleSelect">单选</el-radio>
                                                <el-radio label="multiSelect">多选</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>
                                    <div class="item">
                                        <el-form-item label="投票有效期" prop="voteTime">
                                            <el-radio-group v-model="formData.voteTime">
                                                <el-radio label="one">1天</el-radio>
                                                <el-radio label="two">7天</el-radio>
                                                <el-radio label="three">30天</el-radio>
                                                <el-radio label="four">90天</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>
                                </div>
                            </div>

                            <!-- 选择话题 -->
                            <div class="FormHuati mb40" @click="showTopic">
                                <div class="FormHuatiTit">
                                    <div class="icon"><img src="../assets/images/htico.png" alt=""></div>
                                    选择话题
                                    <!-- 话题列表 s-->
                                    <ul class="topicList">
                                        <li> # 云南三一文化话题1 </li>
                                    </ul>
                                    <!-- 话题列表 e-->
                                </div>
                            </div>

                            <!-- 发布按钮 -->
                            <div class="publishBox">
                                <div class="d-flex a-center">
                                    <el-form-item prop="privacyPolicy">
                                        <el-checkbox value="formData.privacyPolicy" name="type">
                                            草稿将自动保存
                                        </el-checkbox>
                                    </el-form-item>
                                    <a href="javascriprt:void(0)" @click.prevent="scrollToTop">回到顶部</a>
                                </div>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm" :loading="submitting"
                                        class="publishBtn">
                                        {{ submitting ? '发布中...' : '发布' }}
                                    </el-button>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
                <div class="MainLeftRight w26">
                    <div class="Hot_Topic bgwhite mb15">
                        <div class="HomeTit HomeTit_border">
                            <div class="tit">热门话题</div>
                        </div>
                        <div class="Hot_TopicBox">
                            <ul>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 在昆明长春山举行第11次“清明•忠魂祭” </em>
                                            <i class="hot"></i>
                                        </div>
                                        <div class="num">5.7w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 验收烈士家属住房修缮项目及春节慰问</em>
                                            <i class="hot"></i>
                                        </div>
                                        <div class="num">4.8w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 《关注国防文化软实力》影印件</em>
                                            <i class="hot"></i>
                                        </div>
                                        <div class="num">4.5w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># “国善·2021 清明“忠魂祭”烈士纪念活动</em>
                                        </div>
                                        <div class="num">4.2w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 基金会为永胜县烈属李清珍验收住房</em>
                                        </div>
                                        <div class="num">3.7w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 在昆明长春山举行第11次“清明•忠魂祭” </em>
                                        </div>
                                        <div class="num">5.7w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 验收烈士家属住房修缮项目及春节慰问</em>
                                        </div>
                                        <div class="num">4.8w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 《关注国防文化软实力》影印件</em>
                                        </div>
                                        <div class="num">4.5w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># “国善·2021 清明“忠魂祭”烈士纪念活动</em>
                                        </div>
                                        <div class="num">4.2w</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <div class="tit">
                                            <em class="dot"># 基金会为永胜县烈属李清珍验收住房</em>
                                        </div>
                                        <div class="num">3.7w</div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 选择话题弹窗 s -->
    <el-dialog class="accusation-dialog" v-model="accusationVisible" style="width:600px">
        <div class="reporDialog">
            <h3 class="font24 t-center h3 cor000">添加话题</h3>
            <div class="search-user add-topic">
                <div class="d-flex a-center searchBox">
                    <el-input placeholder="搜索话题" class="font16" v-model="formTopicData.tName"
                        @keyup.enter="onSearchUser()">
                    </el-input>
                    <div class="buttons cor999 d-flex a-center">
                        <i class="icon-btn">
                            <img src="../assets/images/search.png" alt="">
                        </i> |
                        <i class="icon-btn">
                            <img src="../assets/images/jia.png" alt="">
                        </i>
                    </div>
                </div>
                <!-- 搜索话题 -->
                <div class="search-topic">
                    <div class="topic-list search-topic-list">
                        <div class="topic-tip cor999 font16">
                            至少添加一个话题
                        </div>
                        <ul>
                            <li class="flex-row-jcsb line-sm">
                                <h3 class="h3 font18 pointer">
                                    # 云南三一文化话题1
                                </h3>
                                <span class="aon font18">1 讨论</span>
                            </li>
                            <li class="flex-row-jcsb line-sm">
                                <h3 class="h3 font18 pointer">
                                    # 云南三一文化话题2
                                </h3>
                                <span class="aon font18">2 讨论</span>
                            </li>
                        </ul>
                    </div>
                    <div class="page flex-jcc">
                        <!-- <el-pagination background @size-change="handleSizeChangeTopic"
                            @current-change="handleCurrentChangeTopic" :current-page="currentPageTopic" :page-size="10"
                            :pager-count="5" layout="total, prev, pager, next" :total="totalTopic">
                        </el-pagination> -->
                    </div>
                </div>
                <!-- <div class="create-topic">
                    <div class="topic-list create-topic-list">
                        <ul>
                            <li class="flex-row-jcsb line-sm">
                                <h3 class="h3 font18 pointer">
                                    # 云南三一文化话题1
                                </h3>
                                <span class="aon font18">1 讨论</span>
                            </li>
                            <li class="flex-row-jcsb line-sm">
                                <h3 class="h3 font18 pointer">
                                    # 云南三一文化话题2
                                </h3>
                                <span class="aon font18">2 讨论</span>
                            </li>
                        </ul>
                    </div>
                </div> -->
            </div>
        </div>
    </el-dialog>
    <!-- 选择话题弹窗 e -->
</template>
<script>
import { Plus } from '@element-plus/icons-vue'

export default {
    components: {
        Plus
    },
    data() {
        return {
            formData: {
                title: '',
                content: '',
                coverType: 'single',
                singleImage: null,
                tripleImages: [],
                tripleImages2: [],
                privacyPolicy: false,
                vote: 'deny',
                titleVote: '',
                options: [
                    { text: '' },
                    { text: '' }
                ],
                voteType: 'singleSelect',
                voteTime: 'one'
            },
            formRules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                content: [
                    { max: 400, message: '内容不能超过400个字符', trigger: 'blur' }
                ],
                coverType: [
                    { required: true, message: '请选择展示封面类型', trigger: 'change' }
                ],
                vote: [
                    { required: true, message: '请选择是否开启投票', trigger: 'change' }
                ],
                titleVote: [
                    { required: true, message: '请输入投票标题', trigger: 'blur' },
                    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                ],
                options: [
                    {
                        validator: (rule, value, callback) => {
                            if (value.length < 2) {
                                callback(new Error('至少需要2个选项'));
                            } else if (value.some(opt => !opt.text.trim())) {
                                callback(new Error('所有选项不能为空'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                voteType: [
                    { required: true, message: '请选择投票乐星', trigger: 'change' }
                ],
                voteTime: [
                    { required: true, message: '请选择投票有效期', trigger: 'change' }
                ],
            },
            submitting: false,

            //   添加话题
            accusationVisible: false,
            // 搜索话题
            formTopicData: {
                tName: '', // 名称
            },
        }
    },
    computed: {
        singleImageList() {
            return this.formData.singleImage ? [this.formData.singleImage] : []
        },
        tripleImageList() {
            return this.formData.tripleImages
        }
    },
    methods: {
        scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },
        handleExceed() {
            this.$message.warning('已达到最大上传数量')
        },
        beforeUpload(file) {
            const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt5M = file.size / 1024 / 1024 < 5

            if (!isJPGorPNG) {
                this.$message.error('只能上传 JPEG/JPG/PNG 格式的图片!')
                return false
            }
            if (!isLt5M) {
                this.$message.error('图片大小不能超过 5MB!')
                return false
            }
            return true
        },
        handleSingleSuccess(response, file) {
            this.formData.singleImage = {
                name: file.name,
                url: URL.createObjectURL(file.raw)
            }
        },
        handleSingleRemove() {
            this.formData.singleImage = null
        },
        handleTripleSuccess(response, file) {
            this.formData.tripleImages.push({
                name: file.name,
                url: URL.createObjectURL(file.raw)
            })
        },
        handleTripleRemove(file, fileList) {
            this.formData.tripleImages = fileList
        },
        handleCoverTypeChange(val) {
            this.formData.singleImage = null
            this.formData.tripleImages = []
        },

        addOption() {
            this.formData.options.push({ text: '' });
        },
        removeOption(index) {
            if (this.formData.options.length > 2) {
                this.formData.options.splice(index, 1);
            }
        },

        async submitForm() {
            try {
                // 验证表单
                await this.$refs.formRef.validate()

                // 验证图片上传
                if (this.formData.coverType === 'single' && !this.formData.singleImage) {
                    throw new Error('请上传单张封面图片')
                }

                if (this.formData.coverType === 'triple' && this.formData.tripleImages.length < 2) {
                    throw new Error('请至少上传两张图，最多上传三张图')
                }

                // 确认对话框
                await this.$confirm('确定要提交吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })

                this.submitting = true

                // 这里替换为实际API调用
                const submitData = {
                    title: this.formData.title,
                    content: this.formData.content,
                    coverType: this.formData.coverType,
                    images: this.formData.coverType === 'single'
                        ? [this.formData.singleImage]
                        : this.formData.tripleImages
                }

                console.log('提交数据:', submitData)

                // 模拟API请求延迟
                await new Promise(resolve => setTimeout(resolve, 1500))

                this.$message.success('提交成功')

            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error(error.message || '提交失败,请将必填项填写')
                }
            } finally {
                this.submitting = false
            }
        },
        showTopic() {
            this.accusationVisible = true
        }

    }
}
</script>
<style scoped>
.MainForm :deep(.el-form-item__content) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.MainForm .title {
    font-size: 24px;
    color: #000000;
    line-height: 1;
    margin-bottom: 20px;
}

.MainForm :deep(.el-input__wrapper) {
    padding: 25px 30px;
    font-size: 16px;
}

.MainForm :deep(.el-input__count) {
    font-size: 16px;
    color: #999;
}

.MainForm :deep(.el-textarea__inner) {
    padding: 30px;
    font-size: 16px;
}

.MainForm :deep(.el-textarea .el-input__count) {
    bottom: auto;
    line-height: 1;
    position: absolute;
    right: 30px;
    top: 30px;
}

.el-radio-group {
    margin-bottom: 20px;
}

.upload-tip {
    margin-top: 10px;
}

.MainForm .FormLoacltion {
    padding-top: 0;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner),
:deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #FF4000;
    border-color: #FF4000;
}

:deep(.el-checkbox__input.is-checked+.el-checkbox__label),
:deep(.el-radio__label) {
    color: #000 !important;
}

.publishBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.publishBox a {
    margin-left: 20px;
    color: #666;
}

.publishBox .el-form-item {
    margin-bottom: 0 !important;
}

:deep(.el-checkbox__label) {
    color: #666;
}

.publishBox a:hover {
    color: #00753e;
}

:deep(.el-radio__inner:hover) {
    border-color: #FF4000 !important;
}

:deep(.el-form-item__label) {
    color: #000;
}


.public-note-container .publice-note-content {
    width: 800px;
}

.public-note-container .choose-type {
    height: 95px;
}

.public-note-container .choose-type .type-item {
    margin-right: 55px;
}

.public-note-container .choose-type .type-item .type-item {
    margin-right: 0;
}

.public-note-container .choose-type .type-item figure {
    margin-bottom: 10px;
}

.public-note-container .edit-content {
    padding-bottom: 30px;
}

.public-note-container .other-form {
    padding-top: 30px;
    padding-bottom: 10px;
}

.public-note-container .other-form .custom-form-item .label {
    width: 110px;
    line-height: 40px;
}

.public-note-container .other-form .custom-form-item .input {
    width: 630px;
}

.public-note-container .other-form .custom-form-item .input .el-form-item__content {
    line-height: 40px;
}

.public-note-container .other-form .custom-form-item .input .el-input__inner {
    height: 40px;
    line-height: 40px;
    padding-right: 30px;
}

.public-note-container .other-form .custom-form-item .input .el-input__icon {
    width: 25px;
    line-height: 40px;
}

.public-note-container .other-form .custom-form-item:not(:last-child) {
    margin-bottom: 15px;
}

.public-note-container .other-form .custom-form-item .cover-txt figure {
    width: 220px;
    height: 165px;
    border: dashed 1px #ddd;
    border-radius: 5px;
}

.public-note-container .other-form .custom-form-item .cover-txt figcaption {
    margin-top: 10px;
}

.public-note-container .other-form .custom-form-item .cover-txt p {
    width: 380px;
    text-align: left;
}

.public-note-container .public-part {
    height: 80px;
}

.public-note-container .public-part .my-btn {
    min-width: 110px;
}

.manuscript-box {
    width: 380px;
    background: linear-gradient(to bottom, #f8fbfe, #fdf8f8);
}

.manuscript-box>h2 {
    height: 60px;
    padding-right: 30px;
}

.manuscript-box>h2 .left-title {
    padding-left: 30px;
}

.manuscript-box>h2 .left-title:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    border-radius: 3px;
    background: rgb(209, 49, 56);
}

.manuscript-box .manuscript-list ul {
    border-top: solid 1px #eee;
}

.manuscript-box .manuscript-list ul li {
    padding: 15px 0;
    padding-right: 10px;
    border-bottom: solid 1px #eee;
}

.manuscript-box .manuscript-list ul li .handel-icons {
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 3;
}

.manuscript-box .manuscript-list ul li p {
    margin-top: 10px;
}

.upload-video {
    max-width: 450px;
    margin: 0 auto;
}

.upload-video .el-upload,
.upload-video .el-upload-dragger {
    width: 100%;
}

.upload-video .el-upload-dragger {
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-video .el-upload-dragger .el-icon-upload {
    margin: 0 0 25px 0;
    font-size: 60px;
}

.search-user .el-form .el-input__inner {
    border: 0;
    height: 50px;
    border-radius: 50px;
    padding: 0 90px 0 50px;
    background-color: #f8f8f8;
}

.search-user .el-form .el-input__suffix {
    width: 80px;
}

.search-user .el-form .el-input__suffix .el-input__icon {
    line-height: 50px;
    width: 100%;
}

.search-user .user-list ul li {
    padding: 10px 0;
    border-bottom: solid 1px #eee;
}

.search-user .user-list ul li figure img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: solid 1px #eee;
    object-fit: cover;
}

.search-user.add-topic .buttons {
    line-height: 40px;
}

.search-user.add-topic .buttons i {
    padding: 0 10px;
    line-height: 40px;
}

.search-user.add-topic .el-form .el-input__inner {
    padding-right: 120px;
}

.search-user.add-topic .el-form .el-input__suffix {
    width: 110px;
}

.search-user.add-topic .topic-tip {
    height: 40px;
    border-bottom: solid 1px #eee;
    line-height: 40px;
}

.search-user.add-topic .topic-list ul li {
    margin-top: 25px;
    padding: 0;
}

.search-user.add-topic .topic-list ul li h3 {
    width: 500px;
    cursor: pointer;
}

.search-user.add-topic .topic-list ul li h3:hover {
    text-decoration: underline;
}

.search-user.add-topic .search-topic-list h3 {
    color: #00753E;
}

.actions .my-btn {
    min-width: 110px;
}

.custom-dialog.w680 .el-dialog {
    width: 680px;
    min-width: 300px;
}

.fixed-time-form .el-input__inner {
    height: 45px;
    line-height: 45px;
    padding-right: 30px;
    background-color: #f8f8f8;
    border: 0;
    width: 120px;
}

.fixed-time-form .day .el-input__inner {
    width: 170px;
}

.fixed-time-form .el-input__icon {
    width: 25px;
    line-height: 45px;
}

.ql-toolbar.ql-snow {
    display: none;
}

.ql-container.ql-snow {
    border: none;
}

.el-select-dropdown__item {
    padding: 0;
}

.search-topic-list .active {
    background-color: #eaeaea;
}

.select-topic,
.select-user {
    color: rgb(var(--rgb-main-color));
}

.select-topic div,
.select-user div {
    display: inline-block;
}

.see-maxImage {
    text-align: center;
}

.see-maxImage .el-dialog {
    width: auto;
    max-width: 90%;
    display: inline-block;
}

.el-select-dropdown__item {
    padding: 0 10px;
}

.searchBox {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-top: 20px;
}

.searchBox :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
}

.accusation-dialog .reporDialog {
    padding-bottom: 30px !important;
}

:deep(.el-form-item__label) {
    width: 110px;
}

.options-list {
    width: 100%;
}

.options-list .option-item {
    position: relative;
    margin-bottom: 20px;
}

.options-list .option-item .el-button {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0px, -50%);
    background: transparent;
    padding: 0;
    border: none;
}

.MainForm .voteBox :deep(.el-input__wrapper) {
    padding: 15px 30px;
}
</style>
